<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  /*.weui-panel {*/
  /*  background: #eee;*/
  /*}*/
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
    background: #eee;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  /*.weui-panel.weui-panel_access {*/
  /*  padding-bottom: 10px;*/
  /*}*/
  /*.weui-panel__bd:not(.base) {*/
  /*  width: 98%;*/
  /*  padding: 0 1% 2px 1%;*/
  /*}*/
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
  .weui-cell_select {
    padding: 0 15px;
  }
  .charts {
    background: #eee;
    padding: 3px;
    padding-top: 0;
    position: relative;
  }
  .switchbtn {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 22px;
    right: 10px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 8px #999;
    z-index: 100000;
    border-radius: 50%;
    font-size: 0;
  }
  .switchbtn img {
    width: 15px;
  }
  .weui-grids {
    background: #fff;
  }
  .weui-grids.sec {
    margin-top: 3px;
  }
  .weui-grid {
    width: 15%;
    padding: 10px 5px;
  }
  .weui-grid.max{
    width: 20%;
  }
  .weui-grids.sec .weui-grid {
    width: 20%;
    padding: 10px 5px;
  }
  .weui-grid.tit {
    width: 30%;
  }
  .weui-grids.sec .weui-grid.tit {
    width: 30%;
  }
  .weui-grid__label {
    overflow: auto;
    text-overflow: initial;
  }
  input.time {
    border: none;
    font-size: 16px;
    width: 26%;
    padding: 0 3%;
    text-align: center;
  }
  .weui-cell {
    padding: 5px 15px;
    margin-bottom: 5px;
    background: #fff;
  }
  .weui-cell:before {
    border-top: none;
  }
  .weui-select {
    width: 28%;
    height: auto;
    line-height: normal;
  }
</style>
<template>
  <div>
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      库存统计
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-cell">
<!--        <div class="weui-cell__hd">-->
<!--          <label class="weui-label">起止日期：</label>-->
<!--        </div>-->
        <div class="weui-cell__bd">
          <select class="weui-select" name="srguid" v-model="srguid">
            <option value="">请选择库房</option>
            <option  v-for="(item, index) in rooms" :key="item.guid" :value="item.guid" >{{item.name}}</option>
          </select>
          <input type="text" id='datetime-picker' class="time" name="startdate" placeholder="请选择开始日期" />
          <span>-</span>
          <input type="text" id='datetime-picker2' class="time" name="enddate" placeholder="请选择结束日期" />
        </div>
      </div>
      <!--      <div class="weui-cell">-->
      <!--        <div class="weui-cell__hd"><label class="weui-label">开始日期</label></div>-->
      <!--        <div class="weui-cell__bd">-->
      <!--          -->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="weui-cell">-->
      <!--        <div class="weui-cell__hd"><label class="weui-label">结束日期</label></div>-->
      <!--        <div class="weui-cell__bd">-->
      <!--          -->
      <!--        </div>-->
      <!--      </div>-->
      <div class="charts">
        <div class="weui-grids" v-if="countinfo.length > 0">
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              库房 类型
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid max">
            <p class="weui-grid__label">
              期初
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              入库
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              出库
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid max">
            <p class="weui-grid__label">
              期末
            </p>
          </a>
          <div v-for="(item, index) in countinfo">
            <a href="javascript:;" class="weui-grid js_grid tit">
              <p class="weui-grid__label">
                {{item.srname}} {{srtype(item.type)}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid max">
              <p class="weui-grid__label">
                {{item.startweight}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.whinweight}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.whinout}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid max">
              <p class="weui-grid__label">
                {{item.endweight}}
              </p>
            </a>
          </div>

        </div>
<!--        <div class="weui-grids sec" v-if="countwhinfo.length > 0">-->
<!--          <a href="javascript:;" class="weui-grid js_grid tit">-->
<!--            <p class="weui-grid__label">-->
<!--              库房-->
<!--            </p>-->
<!--          </a>-->
<!--          <a href="javascript:;" class="weui-grid js_grid tit">-->
<!--            <p class="weui-grid__label">-->
<!--              库间-->
<!--            </p>-->
<!--          </a>-->
<!--          <a href="javascript:;" class="weui-grid js_grid">-->
<!--            <p class="weui-grid__label">-->
<!--              产品-->
<!--            </p>-->
<!--          </a>-->
<!--          <a href="javascript:;" class="weui-grid js_grid">-->
<!--            <p class="weui-grid__label">-->
<!--              库存重量-->
<!--            </p>-->
<!--          </a>-->
<!--          <div v-for="(item, index) in countwhinfo">-->
<!--            <a href="javascript:;" class="weui-grid js_grid tit">-->
<!--              <p class="weui-grid__label">-->
<!--                {{item.srname}}-->
<!--              </p>-->
<!--            </a>-->
<!--            <a href="javascript:;" class="weui-grid js_grid tit">-->
<!--              <p class="weui-grid__label">-->
<!--                {{item.hname}}-->
<!--              </p>-->
<!--            </a>-->
<!--            <a href="javascript:;" class="weui-grid js_grid">-->
<!--              <p class="weui-grid__label">-->
<!--                {{item.product}}-->
<!--              </p>-->
<!--            </a>-->
<!--            <a href="javascript:;" class="weui-grid js_grid">-->
<!--              <p class="weui-grid__label">-->
<!--                {{item.weight}}-->
<!--              </p>-->
<!--            </a>-->
<!--          </div>-->

<!--        </div>-->
      </div>
<!--      <div class="weui-cell">-->
<!--        <div class="weui-cell__hd">-->
<!--          <label class="weui-label">库房：</label>-->
<!--        </div>-->
<!--        <div class="weui-cell__bd">-->
<!--          <select class="weui-select" name="srguid" v-model="srguid">-->
<!--            <option value="">请选择库房</option>-->
<!--            <option  v-for="(item, index) in rooms" :key="item.guid" :value="item.guid" >{{item.name}}</option>-->
<!--          </select>-->
<!--        </div>-->
<!--      </div>-->
      <div class="charts" v-show="!chart1">
        <p class="switchbtn" @click="showChart(1)"><img src="@/assets/icon-chart.png" /></p>
        <div class="weui-grids sec" v-if="countwhinfo1.length > 0">
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              库房(原料)
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              库间
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              产品
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              库存重量
            </p>
          </a>
          <div v-for="(item, index) in countwhinfo1">
            <a href="javascript:;" class="weui-grid js_grid tit">
              <p class="weui-grid__label">
                {{item.srname}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid tit">
              <p class="weui-grid__label">
                {{item.hname}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.product}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.weight}}
              </p>
            </a>
          </div>
        </div>
      </div>
      <div class="charts" v-show="chart1">
        <p class="switchbtn" @click="showTable(1)"><img src="@/assets/icon-table.png" /></p>
        <div class="weui-panel__bd">
          <PieChart :srdata="material" :type="1" :srgname="srgname" v-if="material.length > 0"></PieChart>
        </div>
      </div>
      <div class="charts" v-show="!chart2">
      <p class="switchbtn" @click="showChart(2)"><img src="@/assets/icon-chart.png" /></p>
      <div class="weui-grids sec" v-if="countwhinfo2.length > 0">
        <a href="javascript:;" class="weui-grid js_grid tit">
          <p class="weui-grid__label">
            库房(产成品)
          </p>
        </a>
        <a href="javascript:;" class="weui-grid js_grid tit">
          <p class="weui-grid__label">
            库间
          </p>
        </a>
        <a href="javascript:;" class="weui-grid js_grid">
          <p class="weui-grid__label">
            产品
          </p>
        </a>
        <a href="javascript:;" class="weui-grid js_grid">
          <p class="weui-grid__label">
            库存重量
          </p>
        </a>
        <div v-for="(item, index) in countwhinfo2">
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              {{item.srname}}
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              {{item.hname}}
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              {{item.product}}
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              {{item.weight}}
            </p>
          </a>
        </div>
      </div>
    </div>
      <div class="charts" v-show="chart2">
        <p class="switchbtn" @click="showTable(2)"><img src="@/assets/icon-table.png" /></p>
        <div class="weui-panel__bd">
          <PieChart :srdata="finished" :type="2" :srgname="srgname" :codes="finishedCodes" v-if="finished.length > 0"></PieChart>
        </div>
      </div>
      <div class="charts" v-show="!chart3">
        <p class="switchbtn" @click="showChart(3)"><img src="@/assets/icon-chart.png" /></p>
        <div class="weui-grids sec" v-if="countwhinfo3.length > 0">
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              库房(次品)
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid tit">
            <p class="weui-grid__label">
              库间
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              产品
            </p>
          </a>
          <a href="javascript:;" class="weui-grid js_grid">
            <p class="weui-grid__label">
              库存重量
            </p>
          </a>
          <div v-for="(item, index) in countwhinfo3">
            <a href="javascript:;" class="weui-grid js_grid tit">
              <p class="weui-grid__label">
                {{item.srname}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid tit">
              <p class="weui-grid__label">
                {{item.hname}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.product}}
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid">
              <p class="weui-grid__label">
                {{item.weight}}
              </p>
            </a>
          </div>
        </div>
      </div>
      <div class="charts" v-show="chart3">
        <p  class="switchbtn"><img @click="showTable(3)" src="@/assets/icon-table.png" /></p>
        <div class="weui-panel__bd">
          <PieChart :srdata="defective" :type="3" :srgname="srgname" v-if="defective.length > 0"></PieChart>
        </div>
      </div>
    </div>
    <!--    <div style="display: none;">-->
    <!--      <div class="weui-grids" ref="tables"> <div v-for="(item, index) in codes"> <a href="javascript:;" class="weui-grid js_grid tit"> <p class="weui-grid__label"> {{"TD" + index}} </p> </a> <a href="javascript:;" class="weui-grid js_grid tit"> <p class="weui-grid__label"> {{item}} </p> </a> </div> </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
  import PieChart from "./PieChart";
  export default {
    name: 'CountStock',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        rooms: [],
        postData: {},
        srguid: '',
        srgname: '',
        countinfo: [],
        countwhinfo1: [],
        countwhinfo2: [],
        countwhinfo3: [],
        material: [],
        defective: [],
        finished: [],
        codes: [],
        finishedCodes: [],
        type: 0,
        btnicon: 'icon-table',
        chart1: 1,
        chart2: 1,
        chart3: 1,
      }
    },
    components: {PieChart},
    created() {
      //从首页进入刷新


      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })
    },
    mounted () {
      let that = this;
      this.getStoreRoom();
      //日历初始化
      $("#datetime-picker").calendar();
      $("#datetime-picker2").calendar();
      //日历赋初值
      $("#datetime-picker").val(this.getDate(-1));
      that.postData.startdate = $("#datetime-picker").val().replace(/\//g, '-');
      $("#datetime-picker2").val(this.getDate(0));
      that.postData.enddate = $("#datetime-picker2").val().replace(/\//g, '-');

      $('#datetime-picker').change(function () {
        that.postData.startdate = $(this).val().replace(/\//g, '-');
        that.getCountData();
      })
      $('#datetime-picker2').change(function () {
        that.postData.enddate = $(this).val().replace(/\//g, '-');
        that.getCountData();
      })
    },
    watch: {
      'srguid': function (val) {
        this.postData.srguid = val;
        this.getCountData();
        this.srgname = $('select[name="srguid"]').find("option:selected").text();
      },
      'type': function (val) {

      }
    },
    computed: {
    },
    methods: {
      showTable: function(type) {
        //表格数据获取
        this.type = type;
        if (this['countwhinfo' + type].length == 0) {
          this.getCountData();
        }
        //html更新
        this['chart' + type] = 0;
        //this.btnicon = 'icon-chart';
      },
      showChart: function(type) {
        this['chart' + type] = 1;
        //this.btnicon = 'icon-chart';
      },
      srtype: function (type) {
        let typename = '';
        switch (type) {
          case 1:
            typename = '原料库';
            break;
          case 2:
            typename = '产成品库';
            break;
          case 3:
            typename = '次品库';
            break;

        }
        return typename;
      },
      getStoreRoom: function () {
        this.axios({
          method: 'get',
          url: '/sales/Salespermission!getPermisForStore.action',
          params: {functionTypes: 10}
        }).then(response => {
          if (response.data.msg == 'true') {
            this.rooms = response.data.storeroom;
            if (response.data.storeroom.length > 0) {
              this.srguid = response.data.storeroom[0].guid;
              $('select[name="srguid"]').val(this.rooms[0].guid);
            }
          } else if (response.data.msg == 'loginout') {
            this.toastText('请重新登录');
          } else {
            this.toastText('获取库房数据失败');
          }
        });
        // this.axios({
        //   method: 'get',
        //   url: '/produce/StoreroomCount!getBaseInfo.action',
        //   params: {functiontype: 10}
        // }).then(response => {
        //   if (response.data.msg == 'success') {
        //     this.rooms = response.data.rooms;
        //     if (response.data.rooms.length > 0) {
        //       this.srguid = response.data.rooms[0].guid;
        //       $('select[name="srguid"]').val(this.rooms[0].guid);
        //     }
        //   } else if (response.data.msg == 'outlogin') {
        //     this.toastText('请重新登录');
        //   } else {
        //     this.toastError('系统错误');
        //   }
        // });
      },
      getCountData: function () {
        if (this.postData.startdate == undefined || this.postData.enddate == undefined) {
          return;
        }
        this.postData.type = this.type;
        this.postData.functiontype = 10;
        this.axios({
          method: 'get',
          url: '/produce/StoreroomCount!getCountInfo.action',
          params: this.postData
        }).then(response => {
          if (response.data.msg == 'success') {
            this.countinfo = response.data.countinfo;
            let countwhinfoNO = 'countwhinfo' + this.type;
            this[countwhinfoNO] = response.data.countwhinfo;
            this.material = response.data.material.sort(this.sortData).map(this.filterData);
            this.defective = response.data.defective.sort(this.sortData).map(this.filterData);
            this.finished = response.data.finished.sort(this.sortData).map(this.filterData2);
            this.finishedCodes = this.codes;
          } else if (response.data.msg == 'nopermission') {
            this.toastText('无权查看');
          } else if (response.data.msg == 'outlogin') {
            this.toastText('请重新登录');
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
        });
      },
      sortData: function(a, b) {
        return (a.product + ' ' + a.spename).localeCompare(b.product + ' ' + b.spename);
      },
      sortData2: function(a, b) {
        return a.localeCompare(b);
      },
      filterData: function(item) {
        return {value: item.weight, name: item.product}
      },
      filterData2: function(item) {
        this.codes.push(item.product + ' ' + item.spename);
        return {value: item.weight, name: 'TD' + this.codes.indexOf(item.product + ' ' + item.spename)}
      },
      getDate: function (dayCount) {
        if(null == dayCount){
        }
          dayCount = 0;
        var dd = new Date();
        dd.setDate(dd.getDate()+dayCount);//设置日期
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;//获取当前月份的日期
        var fullM = m.length == 2 ? m : '0' + m;
        var d = dd.getDate();
        return y+"/"+fullM+"/"+d;
      }
    }
  }
</script>
